<template>
  <div class="rate_chart" :id="id"></div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      default: "",
    },
    progressValue: {
      type: Number,
      default: 50,
    },
    option: {
      type: Object,
      default: () => {
        return {
          mainColor: "#00AEFF",
          progressBgColor: "#0F417F",
          bigProgressColor: "#0463B5",
          highLightColors: ["#021C5F", "#009BFF"],
          gradientShallowColor: "#020B49",
          gradientDeepColors: ["#021C5F", "#02266B"],
        };
      },
    },
  },
  mounted() {
    this.renderChart1();
  },
  methods: {
    renderChart1() {
      let myChart = this.$echarts.init(document.getElementById(this.id));

      let option = {
        series: [
          //刻度
          {
            name: "刻度文字",
            type: "gauge",
            radius: "175%",
            center: ["50%", "90%"],
            startAngle: 180,
            endAngle: 0,
            z: 7,
            splitNumber: 10,
            min: 0,
            max: 100,
            axisTick: {
              show: true,
              lineStyle: {
                color: this.option.mainColor,
                width: 1,
              },
              length: 8,
              splitNumber: 1,
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                width: 25,
                opacity: 0,
              },
            },
            axisLabel: {
              distance: -5,
              fontSize: 12,
              color: this.option.mainColor,
            },
          },
          // 背景
          {
            animation: false,
            type: "gauge",
            center: ["50%", "90%"],
            radius: "115%",
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 100,
            splitNumber: 12,
            // 展示当前进度
            progress: {
              show: true,
              width: 15,
              itemStyle: {
                color: this.option.progressBgColor,
              },
            },
            // 仪表盘指针
            pointer: {
              show: false,
            },
            // 仪表盘轴线相关配置
            axisLine: {
              show: false,
            },
            // 刻度样式
            axisTick: {
              show: false,
            },
            // 分隔线样式
            splitLine: {
              show: false,
            },
            // 刻度标签
            axisLabel: {
              show: false,
            },
            // 表盘中指针的固定点
            anchor: {
              show: false,
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: 100,
              },
            ],
          },
          // 内容大圈层
          {
            name: "",
            type: "gauge",
            center: ["50%", "90%"],
            radius: "115%",
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 100,
            zlevel: 10,
            splitNumber: 12,
            // 展示当前进度
            progress: {
              show: true,
              width: 15,
              itemStyle: {
                color: this.option.bigProgressColor,
              },
            },
            // 仪表盘指针
            pointer: {
              show: false,
            },
            // 仪表盘轴线相关配置
            axisLine: {
              show: false,
            },
            // 刻度样式
            axisTick: {
              show: false,
            },
            // 分隔线样式
            splitLine: {
              show: false,
            },
            // 刻度标签
            axisLabel: {
              show: false,
            },
            // 表盘中指针的固定点
            anchor: {
              show: false,
            },
            detail: {
              lineHeight: 40,
              borderRadius: 8,
              offsetCenter: ["0%", "-6%"],
              fontSize: 20,
              fontWeight: "bolder",
              formatter: () => {
                return ((this.progressValue / 100) * 100).toFixed(1) + "%";
              },
              color: "#85D5FA",
            },
            data: [
              {
                value: this.progressValue,
              },
            ],
          },
          // 内容小圈层
          {
            name: "",
            type: "gauge",
            center: ["50%", "90%"],
            radius: "115%",
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 100,
            zlevel: 11,
            splitNumber: 12,
            // 展示当前进度
            progress: {
              show: true,
              width: 5,
              itemStyle: {
                color: this.option.mainColor,
              },
            },
            // 仪表盘指针
            pointer: {
              show: false,
            },
            // 仪表盘轴线相关配置
            axisLine: {
              show: false,
            },
            // 刻度样式
            axisTick: {
              show: false,
            },
            // 分隔线样式
            splitLine: {
              show: false,
            },
            // 刻度标签
            axisLabel: {
              show: false,
            },
            // 表盘中指针的固定点
            anchor: {
              show: false,
            },
            data: [
              {
                value: this.progressValue,
              },
            ],
          },
          // 虚线
          {
            name: "仪表盘背景相关",
            type: "gauge",
            center: ["50%", "90%"],
            radius: "113%",
            startAngle: 175,
            endAngle: 5,
            z: 3,
            min: 0,
            max: 100,
            splitNumber: 20,
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: true,
              splitNumber: 1,
              lineStyle: {
                color: this.option.mainColor,
                width: 10,
              },
              length: -1,
            },
            splitLine: {
              show: false,
            },
            detail: {
              show: false,
            },
            pointer: {
              show: false,
            },
          },
          //高亮内圈
          {
            type: "gauge",
            radius: "53%",
            center: ["50%", "90%"],
            splitNumber: 4,
            zlevel: 10,
            min: 0,
            max: 100,
            startAngle: 180,
            endAngle: 0,
            axisLine: {
              show: true,
              lineStyle: {
                width: 2,
                shadowBlur: 0,
                color: [
                  [
                    1,
                    new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0,
                        color: this.option.highLightColors[0],
                      },
                      {
                        offset: 0.25,
                        color: this.option.highLightColors[1],
                      },
                      {
                        offset: 0.5,
                        color: this.option.highLightColors[1],
                      },
                      {
                        offset: 0.75,
                        color: this.option.highLightColors[1],
                      },
                      {
                        offset: 1,
                        color: this.option.highLightColors[0],
                      },
                    ]),
                  ],
                ],
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            pointer: {
              show: 0,
            },
            detail: {
              show: 0,
            },
          },
          // 内圈背景
          {
            animation: false,
            name: "",
            type: "gauge",
            center: ["50%", "90%"],
            radius: "85%",
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 100,
            splitNumber: 12,
            // 展示当前进度
            progress: {
              show: true,
              width: 30,
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    offset: 1,
                    color: this.option.gradientShallowColor, // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: this.option.gradientDeepColors[0], // 0% 处的颜色
                  },
                  {
                    offset: 0,
                    color: this.option.gradientShallowColor, // 100% 处的颜色
                  },
                ]),
              },
            },
            // 仪表盘指针
            pointer: {
              show: false,
            },
            // 仪表盘轴线相关配置
            axisLine: {
              show: false,
            },
            // 刻度样式
            axisTick: {
              show: false,
            },
            // 分隔线样式
            splitLine: {
              show: false,
            },
            // 刻度标签
            axisLabel: {
              show: false,
            },
            // 表盘中指针的固定点
            anchor: {
              show: false,
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: 100,
              },
            ],
          },
          {
            animation: false,
            name: "",
            type: "gauge",
            center: ["50%", "90%"],
            radius: "70%",
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 100,
            splitNumber: 12,
            // 展示当前进度
            progress: {
              show: true,
              width: 20,
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    offset: 1,
                    color: this.option.gradientShallowColor, // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: this.option.gradientDeepColors[1], // 0% 处的颜色
                  },
                  {
                    offset: 0,
                    color: this.option.gradientShallowColor, // 100% 处的颜色
                  },
                ]),
              },
            },
            // 仪表盘指针
            pointer: {
              show: false,
            },
            // 仪表盘轴线相关配置
            axisLine: {
              show: false,
            },
            // 刻度样式
            axisTick: {
              show: false,
            },
            // 分隔线样式
            splitLine: {
              show: false,
            },
            // 刻度标签
            axisLabel: {
              show: false,
            },
            // 表盘中指针的固定点
            anchor: {
              show: false,
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: 100,
              },
            ],
          },
        ],
      };

      myChart.setOption(option, { notMerge: true });
    },
  },
};
</script>

<style lang="scss" scope>
.rate_chart {
  width: 100%;
  height: 200px;
}
</style>